<!-- 自我评价页面 -->
<template>
  <div>
    <van-nav-bar fixed placeholder title="登记" />
    <div class="self-info">
      <div class="info">
        <div class="self-title">
          自我评价
        </div>
      </div>
    </div>
    <div class="mine-eval">
      <div class="mine">
        <van-field label="自我评价" class="evaluate" placeholder-style="color:#999;" autosize type="textarea" :value="info" placeholder="请输入自我评价" @change="changeInput" />
      </div>
      <div class="statement">
        <div class="statement-title">
          个人声明
        </div>
        <div class="statement-content">
          填表人承诺，以上个人信息符合本人真实情况，如公司发现某些信息不符合填表人真实情况，公司将有权采取公司的相关制度予以解聘或做相应的处罚！
        </div>
      </div>
    </div>
    <div v-if="showSubmit" class="selfBtn">
      <van-button size="large" :class="showSubmit?'submit':'noSubmit'" round @click="submitFamily">
        确认并提交
      </van-button>
    </div>
  </div>
</template>
<script>
export default {
  components: { },
  prop: {

  },
  onLoad(option) {
    if (option.selfInfos) {
      this.info = option.selfInfos
      this.showSubmit = true
    }
  },
  data() {
    return {
      info: '',
      showSubmit: false,
    }
  },
  methods: {
    changeInput(val) {
      if (val) {
        this.showSubmit = true
      } else {
        this.showSubmit = false
      }
      this.info = val.detail
    },
    submitFamily() {
      uni.navigateTo({
        url: `/package-guest/pages/info-regist/info-write/index?selfInfo=${this.info}`,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.self-info{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    .info{
        width: 90%;
        padding: 0px 0px 0px 10px;
        margin: 15px 0px 15px 0px;
        border-left: 2px solid #739ECA;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .self-title{
            color: #000;
            font-size: 16px;
            font-weight: 600;
        }
    }
}
.mine-eval{
    box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);
    border-radius: 2px;
    .mine{
        width: 93%;
        margin: 0 auto;
    }
    .statement{
        width: 87%;
        margin: 0 auto;
        padding: 0px 0px 10px 0px;
        .statement-title{
            font-size: 14px;
            color:#333;
            padding: 0px 0px 5px 0px;
        }
        .statement-content{
            font-size: 12px;
            color:#999;
        }
    }
}
.selfBtn{
  text-align: center;
  padding-top: 15%;
  padding-bottom: 10%;
  width: 80%;
  margin: 0 auto;
}
</style>
<style lang="scss">
.evaluate{
    view .van-cell__title{
        display: none !important;
    }
    view .van-cell__value{
        height: 100px;
        background: #F9F8F8;
    }
}
.mine{
    .van-cell:after{
        border-bottom: 1px solid #fff !important;
    }
    .van-field__body{
        padding-top:8px;
        padding-right:5px;
        height:100%;
    }
    view textarea{
        height: 17px;
        padding: 0px 0px 0px 10px;
        height:100% !important;
    }
}
.selfBtn{
  .noSubmit{
    .van-button--round {
      height: 36px;
      width: 75%;
      background: #ccc !important;
      color: #fff !important;
      font-size: 16px !important;
    }
  }
  .submit{
    .van-button--round {
      height: 36px;
      width: 75%;
      background: #029b00!important;
      color: #fff !important;
      font-size: 16px !important;
    }
  }
}
</style>
